<!-- 这个组件是管理员后端的页面中的成员管理界面，是admin才能访问到，可以添加账号和密码，最高权限，可以对数据库进行添加 -->
<template>
  <div style="margin: 50px">
    <el-row>
      <el-col :span="18">
        <h4>欢迎来到用户管理页面，在这里可以添加用户</h4>
      </el-col>
      <el-col
        :span="6"
        style="display: flex; justify-content: center; align-items: center"
      >
        <el-button type="success" @click="dialogVisible = true"
          >添加用户</el-button
        >
      </el-col>
    </el-row>
  </div>

  <div>
    <el-col :span="18" :offset="3">
      <el-card shadow="always" style="border-radius: 20px">
        <h2 style="text-align: center">用户信息</h2>
        <el-table :data="users" stripe style="width: 100%">
          <el-table-column type="index" width="50" />

          <el-table-column prop="student_id" label="学号" />
          <el-table-column prop="full_name" label="姓名" />
          <el-table-column prop="phone" label="联系电话" />
          <el-table-column prop="degree" label="学历" />
          <el-table-column prop="workplace" label="工作地点" />
          <el-table-column prop="acad_status" label="身份状态">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.acad_status === '已毕业' ? 'primary' : 'success'
                "
                disable-transitions
                >{{ scope.row.acad_status }}</el-tag
              >
            </template></el-table-column
          >
        </el-table>
      </el-card>
    </el-col>
  </div>

  <!-- 添加用户对话框 -->
  <el-dialog v-model="dialogVisible" align-center>
    <h2 style="text-align: center; margin-bottom: 30px">添加用户</h2>
    <el-form :model="form" label-width="left">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="14" :offset="5">
          <el-form-item label="学号">
            <el-input placeholder="请输入学号" v-model="form.student_id" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第2行 -->
      <el-row>
        <el-col :span="14" :offset="5">
          <el-form-item label="密码">
            <el-input
              type="password"
              show-password
              placeholder="请输入密码"
              v-model="form.password"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row justify="center" style="margin: 30px">
      <el-button @click="addUser" type="success">提交</el-button>
      <el-button type="primary" @click="dialogVisible = false">
        关闭
      </el-button>
    </el-row>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import api from "@/utils/api";
import { ElMessage } from "element-plus";

// 响应式数据
const users = ref([]);

// 定义函数
function fetchUsers() {
  api
    .get("/members")
    .then((res) => {
      if (res.data.code === 200) {
        users.value = res.data.data; // 注意这里用 .value
      }
    })
    .catch((err) => {
      console.error("获取用户失败:", err);
    });
}

// 组件挂载时调用
onMounted(() => {
  fetchUsers();
});

const dialogVisible = ref(false);

// do not use same name with ref
const form = reactive({
  student_id: "",
  password: "",
});

const addUser = () => {
  console.log("当前 token:", localStorage.getItem("token"));
  api
    .post(
      "/members",
      {
        student_id: form.student_id,
        password: form.password,
      },
      { headers: { auth: true } }
    )
    .then((res) => {
      console.log("注册成功:", res.data);
      ElMessage({
        showClose: true,
        message: "添加成功！",
        type: "success",
      });
      // ✅ 添加成功后刷新用户列表
      fetchUsers();

      // ✅ 可选：清空表单
      form.student_id = "";
      form.password = "";
    })
    .catch((err) => {
      console.error("注册失败:", err.response?.data || err.message);
    });
};
</script>
